1
00:00:00,330 --> 00:00:07,310
Oke, sekarang kita sudah memiliki item menu dan halaman toko, yang akan kita buat adalah header.

2
00:00:07,800 --> 00:00:14,400
Kami memerlukan cara yang lebih mudah untuk bernavigasi antar halaman dan kami ingin membangun komponen ini sedemikian rupa

3
00:00:14,400 --> 00:00:21,120
agar selalu hadir, halaman mana pun yang kita navigasikan sekarang, kita ingin melakukannya sedemikian rupa

4
00:00:21,120 --> 00:00:25,470
bahwa kita tidak perlu memasang header pada setiap komponen halaman yang kita miliki.

5
00:00:25,770 --> 00:00:28,680
Tapi itu sangat mudah dengan router reaksi Dom.

6
00:00:29,520 --> 00:00:33,390
Sekarang, sebelum saya menunjukkannya, mari kita buat komponen headernya.

7
00:00:33,600 --> 00:00:35,370
Sekarang, mari kembali ke aplikasi kita.

8
00:00:36,420 --> 00:00:39,210
Dan mari kita membuat komponen header.

9
00:00:40,710 --> 00:00:47,140
Dan dalam komponen kita, kita akan memiliki tersangka yang biasa, kita memerlukan komponen header,

10
00:00:47,140 --> 00:00:53,520
RSX Belanda dan gaya header DOT SAS.

11
00:00:54,840 --> 00:00:57,480
Dan di kepala kami, komponen kami, kami akan mengimpor.

12
00:00:58,620 --> 00:01:00,330
Bereaksi dari bereaksi.

13
00:01:01,510 --> 00:01:03,700
Dan kita akan mengimpor stylesheet kita ke dalamnya.

14
00:01:08,940 --> 00:01:13,680
Kepala kita, komponen kita akan menjadi komponen fungsional.

15
00:01:14,880 --> 00:01:18,630
Dan itu akan memiliki div yang berisi kode header kita.

16
00:01:19,500 --> 00:01:27,090
Dan kode ini akan sangat mirip dengan apa yang kita lihat, jadi ini hanya bagian luarnya saja

17
00:01:27,090 --> 00:01:36,060
container, grup tautan opsi yang kita miliki di sini yang akan dimuat dalam opsi grup itu

18
00:01:36,060 --> 00:01:38,760
tautan wadah dan kemudian logo.

19
00:01:39,630 --> 00:01:44,340
Jadi yang akan kita tambahkan di sini adalah nama kelas heter.

20
00:01:46,000 --> 00:01:55,780
Dan kemudian kita akan membuat logo kita, sehingga logo kita akan tertaut ke beranda ketika Anda mengkliknya dan

21
00:01:55,780 --> 00:02:01,240
cara kita melakukannya adalah kita mengimpor tautan.

22
00:02:02,130 --> 00:02:03,840
Dari dom router React.

23
00:02:06,720 --> 00:02:08,940
Dan kemudian kita akan menempatkan Lincoln saja.

24
00:02:09,830 --> 00:02:14,240
Dengan keduanya menunjuk ke rute beranda kami.

25
00:02:17,060 --> 00:02:28,250
Dan kami ingin menggunakan ikon kami yang sebenarnya, tetapi saya telah menyediakannya dalam format SPG dan C.G.

26
00:02:28,250 --> 00:02:35,810
ikon pada dasarnya adalah grafik vektor yang dapat diskalakan, yang sangat kecil, sangat berperforma tinggi, namun terlihat bagus

27
00:02:35,810 --> 00:02:39,550
tetap sama tidak peduli seberapa besar atau kecil gambar itu diperluas.

28
00:02:40,010 --> 00:02:40,960
Dan itu sangat bagus.

29
00:02:42,300 --> 00:02:49,830
Dan saya punya itu untuk kita di sini, jadi Anda cukup menyalinnya dari file yang saya sediakan di sini

30
00:02:49,830 --> 00:02:50,190
pelajaran.

31
00:02:53,610 --> 00:02:58,080
Sekarang, yang akan kita lakukan adalah membuat folder baru di sumber kita bernama Assets.

32
00:02:59,110 --> 00:03:02,650
Dan di dalamnya kita tinggal paste saja ya?

33
00:03:03,600 --> 00:03:09,570
Dan Anda akan melihat banyak kode yang sebenarnya mewakili Crown SVG, tetapi di header kami, kami hanya

34
00:03:09,570 --> 00:03:14,790
akan mengimpor ini ke komponen kami dan kami akan mengimpornya.

35
00:03:16,500 --> 00:03:23,880
Aset disekitar kita dan yang akan kita tulis adalah komponen react berupa logo.

36
00:03:24,900 --> 00:03:30,750
Karena ini bukan file sex, sebenarnya kami tidak mengatur impornya, kami hanya mengimpor di SEVGI ini

37
00:03:30,870 --> 00:03:35,490
sebagai kata kunci komponen Riak ini, tapi kami mengaturnya ke logo di sini.

38
00:03:36,420 --> 00:03:40,830
Dan dengan melakukan ini, kami sekarang dapat menempatkannya di sini.

39
00:03:43,220 --> 00:03:46,340
Dan kita juga bisa memberinya nama kelas logo.

40
00:03:47,620 --> 00:03:55,330
Dan nama kelas kami untuk link kami akan menjadi wadah logo, karena kami ingin wadah tersebut memiliki beberapa logo

41
00:03:55,330 --> 00:03:56,280
gaya di atasnya juga.

42
00:03:57,850 --> 00:04:04,000
Sekarang pilihan kita akan disimpan dalam wadah pilihan masing-masing.

43
00:04:05,920 --> 00:04:07,720
Dan mereka juga akan menjadi milik Linc.

44
00:04:10,210 --> 00:04:13,660
Dan mereka akan menunjuk ke toko kami.

45
00:04:15,230 --> 00:04:17,000
Dan dapatkan nama kelasnya.

46
00:04:19,150 --> 00:04:22,870
Dan di dalam yang pertama ini akan ada toko kita.

47
00:04:23,900 --> 00:04:27,710
Dan yang kedua akan puas.

48
00:04:30,310 --> 00:04:32,020
Dan kemudian kami mengekspornya saja.

49
00:04:33,450 --> 00:04:36,970
Dan kami baru saja membawanya ke ABC kami.

50
00:04:41,330 --> 00:04:43,400
Setelah kami mengimpor ini.

51
00:04:46,070 --> 00:04:47,930
Komponen header header lawan.

52
00:04:48,880 --> 00:04:54,160
Yang harus kita lakukan hanyalah menempatkan header ini di luar saklar.

53
00:04:55,200 --> 00:05:04,380
Dan rute yang berisi semua komponen halaman kami karena dengan melakukan ini header selalu ada

54
00:05:04,380 --> 00:05:12,390
dan dirender terlepas dari apa pun reaksi router, komponen switch, dan komponen root yang diputuskan untuk dirender

55
00:05:12,390 --> 00:05:12,900
halaman.

56
00:05:13,680 --> 00:05:22,560
Dan ini sangat bagus karena jika kita memiliki, katakanlah, pop up atau overlay atau footer, kita selalu seperti itu

57
00:05:22,560 --> 00:05:29,130
ingin ditampilkan di aplikasi kita atau setidaknya berada di halaman, terlepas dari jalur mana penggunanya

58
00:05:29,130 --> 00:05:31,830
aktif, kami akan melakukannya seperti ini.

59
00:05:31,830 --> 00:05:37,310
Dan ini sungguh luar biasa karena membuat aplikasi kami sangat intuitif.

60
00:05:37,320 --> 00:05:38,520
Kelihatannya sangat bisa disusun.

61
00:05:39,620 --> 00:05:45,020
Karena kita tahu semua halaman kita ada di sini dan header kita ada di luar saklar ini.

62
00:05:46,060 --> 00:05:52,480
Oke, sekarang jika kita masuk ke aplikasi kita, kita akan melihat bahwa kita memiliki apa yang tampak seperti header, hanya saja tidak ada gaya

63
00:05:52,480 --> 00:05:52,600
itu.

64
00:05:53,350 --> 00:05:55,970
Jadi mari kita tulis gayanya.

65
00:05:56,320 --> 00:05:59,380
Sekarang, saya sudah menulisnya.

66
00:06:02,690 --> 00:06:08,330
Header kita yang berisi d'Hiv memiliki lebar seratus persen dan tinggi tujuh puluh

67
00:06:08,330 --> 00:06:08,850
piksel.

68
00:06:09,470 --> 00:06:16,820
Kami mengatur tampilan fleksibel sehingga ketika kami menempatkan ruang konten di antara anak-anak di dalamnya

69
00:06:16,820 --> 00:06:17,260
orang tua.

70
00:06:17,840 --> 00:06:24,740
Jadi wadah logo kita dan opsinya akan dipisah sejauh mungkin dengan ruang yang tersisa

71
00:06:24,740 --> 00:06:29,030
bahwa mereka sendiri tidak mengambil sejauh menyangkut lebarnya.

72
00:06:30,240 --> 00:06:35,940
Jadi ada margin bawah yang mendorong halaman kita dua puluh lima piksel ke bawah dari apa pun di bawah header

73
00:06:36,660 --> 00:06:42,570
dan kemudian wadah logo kita hanya memiliki lebar 70 piksel, sedangkan pilihan kita.

74
00:06:43,760 --> 00:06:52,280
Memiliki lebar 50 persen, jadi selalu dibutuhkan 50 persen apapun yang ada headernya dan mereka

75
00:06:52,280 --> 00:06:53,630
sejajarkan semuanya di tengah.

76
00:06:54,700 --> 00:07:00,010
Dan mereka selalu fleksibel sehingga membenarkan fluks yang konstan dan berarti kita ingin selalu mengaturnya

77
00:07:00,010 --> 00:07:04,480
sehingga mereka berada di sisi kanan komponen.

78
00:07:04,480 --> 00:07:08,110
Jadi mereka berada di ujung kotak fleksibel yang sebenarnya.

79
00:07:09,300 --> 00:07:15,240
Dan kemudian pilihan kita memiliki beberapa tambahan kecil sehingga tidak terlalu dikelompokkan bersama dan sekarang kita lihat

80
00:07:15,240 --> 00:07:23,160
pada kode kita, kita melihat bahwa mahkota kita membawa kita ke rumah, toko kita membawa kita ke toko.

81
00:07:23,670 --> 00:07:28,070
Dan kami memiliki versi paling dasar dari pengaturan header kami.

82
00:07:28,530 --> 00:07:31,860
Kami memiliki halaman kontak di luar, tetapi kami akan melakukannya di bagian paling akhir.

83
00:07:32,280 --> 00:07:39,750
Apa yang harus kita lakukan adalah kita harus memodifikasi tag tautan yang kita gunakan sebagai opsi agar tidak kita miliki

84
00:07:39,750 --> 00:07:45,560
garis bawah ini atau warna ungu yang dilengkapi dengan tag A.

85
00:07:46,020 --> 00:07:50,360
Sekarang, meskipun itu adalah komponen tautan, jika kita memeriksanya, kita melihat apa yang dirender.

86
00:07:50,370 --> 00:07:52,680
Apakah ini sebuah tanda?

87
00:07:52,800 --> 00:07:53,120
Benar.

88
00:07:53,160 --> 00:07:54,270
Asli ini, sebuah tag.

89
00:07:54,480 --> 00:08:02,760
Jadi kita tahu bahwa dom router reaksi sebenarnya memodifikasi tag dan kemudian memberikan fungsionalitas di dalamnya

90
00:08:02,760 --> 00:08:05,480
dirinya sendiri untuk melakukan perilaku tersebut.

91
00:08:05,490 --> 00:08:10,140
Jadi untuk melakukan itu, kita harus mengubah akses kita.

92
00:08:10,710 --> 00:08:19,320
Dan kita bisa melakukannya disini dengan mengirimkan hiasan teks ke none dan warnanya menjadi hitam, kita bisa saja

93
00:08:19,320 --> 00:08:22,260
menargetkan secara selektif tautan itu sendiri.

94
00:08:23,340 --> 00:08:32,370
Di dalam kepala kita, komponen kita dengan penargetan mengatakan apa saja dengan nama kelas pilihan, tapi kita ingin

95
00:08:32,370 --> 00:08:39,150
sehingga tidak ada serangan kami yang benar-benar memiliki hiasan teks ini karena kami mungkin tidak akan pernah menggunakannya

96
00:08:39,150 --> 00:08:40,410
serangan asli.

97
00:08:40,890 --> 00:08:45,510
Jadi jika kita simpan, kita akan melihat bahwa sekarang sudah diperbarui.

98
00:08:46,230 --> 00:08:53,100
Oke, sekarang hal terakhir yang perlu kita lakukan hanyalah mengkomit kode kita sebelum kita selesai menata gaya header kita,

99
00:08:53,220 --> 00:09:00,000
karena di bagian selanjutnya kita akan menyertakan halaman Sinon dan tombol Sinon kita.

100
00:09:00,840 --> 00:09:03,210
Jadi mari kita kembali ke terminal kita.

101
00:09:04,450 --> 00:09:06,130
Mari kita lihat apa yang kita punya.

102
00:09:07,650 --> 00:09:09,450
Jadi kita hanya akan menambahkan warna kita.

103
00:09:11,500 --> 00:09:22,870
Menambahkan komponen lain dan tautan ke beranda halaman toko, lalu kita lewati saja Origin Master.

104
00:09:23,710 --> 00:09:26,350
Oke, sekarang mari kita buat Sinon itu.